import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/styles/common.css'
import '@/assets/styles/el-reset.css'

import qfSubMenu from "qf-sub-menu" //引入我们的组件
//使用Vue.use()将组件注入到所有的子组件

// 引入进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

Vue.use(qfSubMenu)

// 路由守卫
// 全局的前置钩子
router.beforeEach((to,from,next)=>{
  // 把进度条打开
  nprogress.start()
  // console.log('to',to);
  // console.log('from',from);
  // console.log('next',next);
  // 1.判断本地存储中是否右token，如果有就放心，没有就让其重新跳转到登入页
  let token = localStorage.getItem('sw-token');
  if(token){
    if(store.state.userMenu.length === 0){
      // 说明用户的路由信息（菜单信息）没有了，需要重新发起请求
      store.dispatch('FETCH_MENULIST').then(()=>{
        // 重新激活动态添加的路由，replace:true 不产生历史记录
        next({...to,replace:true})
      })
    }else{
      // 需要调用next函数才能加载出页面
      next()
    }
  }else{
    // 1.用户没有登入，不能访问登入页面以外的其他页面

    // 如果用户访问的路径是login页面，那就需要放行
    if(to.path === '/login'){
      next()
    }else{
    // 如果不是login，那就拦截，并且跳转到login页
      next({path:'/login'})
    }
  }
})

// 自定义全局鉴权指令
Vue.directive("has",{
  inserted(el,binding){
    // console.log(el);
    // console.log(binding);
    // 从本地取出用户的按钮权限
    let permission = localStorage.getItem('ewm-permission') || '[]'
    permission = JSON.parse(permission)
    // console.log(permission);

    //看permission中是否包含传入的value对应字段
    //如果包含说明具备该按钮权限
    //不包含则要禁用按钮
    if(!permission.includes(binding.value)){
      //先保存按钮原来的类名
      let ElclassName = el.className;
      //用原来的类名加上is-disabled触发禁用样式
      el.className = ElclassName + " " + "is-disabled"
      //真正禁用按钮
      el.disabled = true;
    }
  }
})

// 全局后置钩子  afterEach 中停止进度条
router.afterEach((to,next,from) => {  // 已经进入页面了
  // console.log(to);
  // console.log(next);
  // 深拷贝 浅拷贝 lodash=>deepclone()  JSON.stringify()  JSON.parse()
  let matched = [...to.matched]   // 浅拷贝到一个新的数组
  matched.splice(0,1)
  // console.log(matched);
  // 调用commit触发mutation 更改vuex中储存的breadCrumb
  store.commit("SET_BREADCRUMB",matched)
  // 停止进度条
  nprogress.done()
})


// 引入公共样式
import "@/assets/styles/common.css"
import "@/font/iconfont.css"

Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
